import React, {useState} from 'react';

import './cell.css'

const level = (header) => {
  return header.split('#').length - 1;
}

const content = (header) => {
  return header.replace(/#/g, '');
}

const DisplayCell = ({width, children}) => {

  if (typeof children === 'string'){
    const leveled = children[0] === '#'
      ? `cell text-cell text-header-${level(children)}`
      : 'cell text-cell text-plain';

    return <div className={leveled} style={{width}}>{content(children)}</div>
  }

  else if (typeof children === 'number') {

    const localeOptions = {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    }

    return <div className="cell number-cell" style={{width}}>
      {parseFloat(children.toFixed(2)).toLocaleString('en-us', localeOptions)}
    </div>
  
  } else if (Object.keys(children ?? {}).length === 0) {
    return <div className="cell text-cell text-plain" style={{width}}></div>
  } else {
    const display = Object.keys(children).join('/')
    return <div className="cell text-cell text-plain" style={{width}}>{display}</div>
  }
}

const EditableCell = ({width, children, colKey, rowIndex, updateProp, attr}) => {

  const [inputVal, setInputVal] = useState(children);
  const [showOpts, setShowOpts] = useState(false);
  const [options, setOptions] = useState([]);

  const getOptions = (path, options={}) => {
    return options[path.replace(/(^|\/)[^\/]*$/, '')] ?? ['A', 'B'];
  }

  const selectOption = (e) => {

    const val = e.target.value;

    e.preventDefault();
    e.stopPropagation();
    setShowOpts(false);
    
    const newVal = inputVal.replace(/(^|\/)[^\/]*$/, `$1${val}`);

    setInputVal(newVal);
    updateProp(rowIndex, colKey, newVal);
  }

  // Refs:
  // https://github.com/react-toolbox/react-toolbox/issues/1323
  // https://stackoverflow.com/questions/17769005/onclick-and-onblur-ordering-issue/57630197#57630197
  const suggs = showOpts
  ? <div className='edit-sugg'>
      {options.map((elem, i) => <option
        className='edit-sugg-item'
        onMouseDown={(e) => e.preventDefault()}
        onClick={selectOption}
        key={i}
        >{elem}
      </option>)}
    </div>
  : <div />

  return <div className="edit-col" style={{width}}>
    {suggs}
    <input
      className='edit-input'
      value={inputVal}
      onChange={(e) => {
        const value = e.target.value;
        console.log(getOptions(value, attr.options));
        setInputVal(value);
        setOptions(getOptions(value, attr.options))
        updateProp(rowIndex, colKey, value);
      }}
      onInput={(e) => {
        setShowOpts(true);
      }}
      onBlur={(e) => {
        e.preventDefault();
        e.stopPropagation();
        setShowOpts(false);
      }}
    />
  </div>

}

export default ({width, children, colKey, rowIndex, editing, updateProp, attr}) => {

  if (!editing) {
    return <DisplayCell {...{width, children, attr}} />
  } else {
    return <EditableCell {...{width, children, colKey, rowIndex, updateProp, attr}} />
  }
}